<template>
  <div class="app-container">
    <div class="flex-box" v-if="!detailsShowStatus">
      <div class="item">
        <el-button icon="el-icon-circle-plus-outline" @click="addShow">添加预定</el-button>
      </div>
      <div class="item">
        <el-date-picker
          v-model="searchdate"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="—"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
          @change="getList"
        />
      </div>
      <div class="item">
        <el-select v-model="timetype" placeholder="请选择时间段" @change="userLevelSearch">
          <el-option
            :key="0"
            label="全部时间段"
            :value="0"
          />
          <el-option
            v-for="item in timetypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="item">
        <el-input v-model="searchcontent" placeholder="请输入用户联系方式进行查询">
          <el-button slot="append" icon="el-icon-search" @click="getList">搜索</el-button>
        </el-input>
      </div>
      <div class="item">
        <span>总共有{{ total }}条数据</span>
      </div>
    </div>

    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%" v-if="!detailsShowStatus" class="no-r-b"
      :header-cell-style="{background:'#FAFAFA',color:'#666666'}">
      <el-table-column align="center" label="订单编号" width="170">
        <template slot-scope="scope">
          <span>{{ scope.row.ordersn }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" show-overflow-tooltip label="用户名称" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>

      <!-- <el-table-column align="center" label="用户英文名称" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column> -->

      <el-table-column align="center" label="用户联系方式" width="110">
        <template slot-scope="scope">
          <span>{{ scope.row.contact }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center"show-overflow-tooltip label="餐桌名称" width="140">
        <template slot-scope="scope">
          <span>{{ scope.row.title_zn+'('+scope.row.title+')' }}</span>
        </template>
      </el-table-column>

      <!-- <el-table-column align="center" label="餐桌英文名称" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column> -->

      <el-table-column align="center" label="就餐日期" width="93">
        <template slot-scope="scope">
          <span>{{ scope.row.sitday }}</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="就餐时间段" width="134">
        <template slot-scope="{row}">
          {{
            row.timetype == 1 ?'2:00PM~4:00PM':
            row.timetype == 2 ?'4:00PM~6:00PM':
            row.timetype == 3 ?'6:00PM~8:00PM':
            row.timetype == 4 ?'8:00PM~10:00PM': '未知时间段'
            }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="就餐人数" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.pernum }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="预定类型" width="78">
        <template slot-scope="scope">
          <span>{{ scope.row.ordtype == 1 ? '线上点单' : '现场点单'}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="定金" width="78">
        <template slot-scope="scope">
          <span>{{ scope.row.earnest/100 }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="应付总金额" width="92">
        <template slot-scope="scope">
          <span>{{ scope.row.total/100 }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="预定状态" width="78">
        <template slot-scope="scope">
          <span>
          {{
            scope.row.status == 0 ? '待付款' :
            scope.row.status == 1 ? '待接单' :
            scope.row.status == 2 ? '待进场' :
            scope.row.status == 3 ? '待结账' :
            scope.row.status == 4 ? '已结账' :
            scope.row.status == 5 ? '退订' :
            scope.row.status == 6 ? '取消订单' : '未知状态'
          }}
          </span>
        </template>
      </el-table-column>

      <el-table-column align="center" show-overflow-tooltip label="备注" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.remark}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" show-overflow-tooltip label="创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.created_at | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="220">
        <template slot-scope="scope">
          <div class="caozuo">
            <span v-if="scope.row.status != 4 && scope.row.status != 5 && scope.row.status !=6" type="primary" size="small" icon="el-icon-edit" @click="editShow(scope.row)">编辑</span>
            <span type="primary" size="small" icon="el-icon-edit" @click="showDetails(scope.row)">点单详情</span>
            <span v-if="scope.row.status != 0 && scope.row.status != 4 && scope.row.status != 5 && scope.row.status !=6" type="primary" size="small" icon="el-icon-edit" @click="goRef(scope.row)">退订</span>
            <span v-if="scope.row.status == 1" type="primary" size="small" icon="el-icon-edit" @click="goTo2(scope.row)">确认接单</span>
            <span v-if="scope.row.status == 2" type="primary" size="small" icon="el-icon-edit" @click="goTo3(scope.row)">去结账</span>
            <span v-if="scope.row.status == 3" size="small" icon="el-icon-thumb" @click="doRchk(scope.row,1)">结账</span>
            <span v-if="scope.row.status == 0" size="small" icon="el-icon-thumb" @click="doRchk(scope.row,2)">取消订单</span>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-if="!detailsShowStatus && total>0" :total="total" :page.sync="listQuery.page" :pageSizes="[15,25,35,45,55]" :limit.sync="listQuery.limit" @pagination="getList" />

    <!-- 详情开始 -->
    <div v-if="detailsShowStatus">
      <div class="flex-box">
        <div class="item">
          <el-button style="background-color: #FCE6EC;border: 1px solid #FEBCCD;border-radius: 6px;color: #E82F5F;" icon="el-icon-arrow-left" @click="detailsShowStatus=false">
            返回
          </el-button>
        </div>
        <div class="item">
          <el-button icon="el-icon-circle-plus-outline" @click="addProdShow" v-if="selectStatus != 4 && selectStatus != 5 && selectStatus !=6">添加商品</el-button>
        </div>
      </div>
      <div class="order-info">
        <span>
          订单编号: {{selectOrdersn}}&nbsp;&nbsp;/&nbsp;&nbsp;
          用户名称: {{selectInfo.username}}&nbsp;&nbsp;/&nbsp;&nbsp;
          联系方式: {{selectInfo.contact}}&nbsp;&nbsp;/&nbsp;&nbsp;
          就餐日期: {{selectInfo.time}}&nbsp;&nbsp;/&nbsp;&nbsp;
          备注: {{selectInfo.tips}}
        </span>
      </div>
      <div style="display: flex;align-items: center;" class="order-info" v-if="scenename&&scene">
        <span>已选择场景: {{scenename}}</span>
        <el-image
          style="width: 100px;"
          :src="domainName+scene"
          :preview-src-list="[domainName+scene]">
        </el-image>
        <!-- <el-image :src="domainName+scene"></el-image> -->
      </div>
      <el-table v-loading="listLoading" :data="detailsProdList" border fit highlight-current-row style="width: 100%;">
        <el-table-column align="center" label="已点商品">
          <template slot-scope="scope">
            <el-image :src="domainName+(scope.row.image)" />
          </template>
        </el-table-column>

        <el-table-column align="center" label="中文名称">
          <template slot-scope="scope">
            <span>{{ scope.row.proname_zn }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="英文名称">
          <template slot-scope="scope">
            <span>{{ scope.row.proname }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="成交价">
          <template slot-scope="scope">
            <span>{{ scope.row.proprice/100 }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="成交数量">
          <template slot-scope="scope">
            <span>{{ scope.row.pronum }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="成交状态">
          <template slot-scope="scope">
            <span>{{ scope.row.status == 2 ? '待付款' :  scope.row.status == 3? '已付款' : '已退订' }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="添加时间" width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.created_at }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="selectStatus != 4 && selectStatus != 5 && selectStatus !=6" align="center" fixed="right" label="操作" width="240">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status != 4" type="danger" size="small" icon="el-icon-delete" @click="delDorp(scope.row)">商品退订</el-button>
            <el-button v-if="scope.row.status != 4" size="small" icon="el-icon-delete" @click="doStoreShow(scope.row)">存酒</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 详情结束 -->

    <!-- 存酒弹窗 -->
    <el-dialog title="数量" :visible.sync="dialogShuVisible" center class="users" width="95%">
      <el-form>
        <el-form-item>
          <el-input v-model="prodShu"></el-input>
        </el-form-item>
        <el-button @click="doStore">确认</el-button>
      </el-form>
      <!-- <el-input v-model="prodShu"></el-input>
      <el-button @click="doStore">确认</el-button> -->
    </el-dialog>
    <!-- 存酒弹窗 -->

    <!--列表数据添加/编辑开始  -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" center width="95%" class="user">
      <el-form ref="ruleForm" :model="formRow" label-width="100px">
        <el-form-item label="餐桌英文名">
          <el-autocomplete
            class="inline-input"
            v-model="tableName"
            :fetch-suggestions="querySearchTable"
            placeholder="请输入餐桌英文名"
            :trigger-on-focus="false"
            @select="handleSelectTable">
            </el-autocomplete>
          <!-- <el-select
              v-model="formRow.tid"
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="remoteMethod"
              :loading="loading">
              <el-option
                v-for="item in tableName"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select> -->
        </el-form-item>
        <el-form-item label="用户联系方式">
          <el-autocomplete
            class="inline-input"
            v-model="userPhone"
            :fetch-suggestions="querySearchUser"
            placeholder="用户联系方式"
            :trigger-on-focus="false"
            @select="handleSelectUser">
          </el-autocomplete>
        </el-form-item>
        <el-form-item label="就餐时间段">
          <el-select v-model="formRow.timetype" placeholder="请选择">
            <el-option
              v-for="item in timetypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="就餐日期">
          <el-date-picker
            v-model="sitday"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="就餐人数">
          <el-input type="number" v-model="formRow.pernum" :placeholder="tableSitnum?'该桌就餐人数建议不要超过'+tableSitnum+'人':'请输入就餐人数'" auto-complete="off" />
        </el-form-item>
        <el-form-item label="订单备注">
          <el-input v-model="formRow.remark" auto-complete="off" />
        </el-form-item>
        <!-- <el-form-item> -->
          <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        <!-- </el-form-item> -->
      </el-form>
    </el-dialog>
    <!--列表数据添加/编辑结束  -->

    <!-- 添加商品开始 -->
    <el-dialog title="添加商品" :visible.sync="dialogProdVisible" width="90%" center>
      <div class="search">
        <el-input type="text" v-model="searchProd" placeholder="请输入商品英文名来进行查找">
          <el-button slot="append" icon="el-icon-search" @click="getProdList">搜索</el-button>
        </el-input>
      </div>
      <div class="prod-list" v-loading="prodListLoading">
        <div class="prod-list-item" v-for="(item,index) in prodList" :key="index">
          <el-image class="img" :src="domainName+item.image"></el-image>
          <div class="info">
            <div class="name">
              {{item.proname_zn}}({{item.proname}})
              <span>{{item.catenames}}</span>
            </div>
            <div class="price hd">
              活动价格:RM {{item.rprice/100}}
            </div>
            <div class="price yj">
              原价:RM {{item.mprice/100}}
            </div>
            <el-input-number v-model="item.sum" @change="clooseProd(item)" :min="0" label="描述文字"></el-input-number>
            <div class="status">
              <el-radio v-if="item.sum>0" v-model="item.status" :label="2">待付款</el-radio>
              <el-radio v-if="item.sum>0" v-model="item.status" :label="3">已付款</el-radio>
            </div>
          </div>
        </div>
      </div>
      <pagination v-if="prodTotal>0" :total="prodTotal" :page.sync="prodListQuery.page" :layout="'prev, pager, next'" :pageSizes="[4,8,12,16,20,24,28,32,36,40]" :limit.sync="prodListQuery.limit" @pagination="getProdList" />

      <div class="bottom">
        <!-- 共有{{prodTotal}}件商品 -->
        <el-button class="left" @click="drawer = true">查看已加购商品({{prodSum(selectedProdList,'sum')}})</el-button>
        <el-button class="right" :disabled="selectedProdList.length==0" @click="saveProd">确认添加({{prodSum(selectedProdList,'sum')}})</el-button>
      </div>

      <el-drawer
          custom-class="drawer"
           size="80%"
           :append-to-body="true"
           :visible.sync="drawer">
           <div style="width: 90%;margin: 0 auto;">已加购商品</div>
           <div class="prod-list" v-if="selectedProdList.length>0">
             <div class="prod-list-item" v-for="(item,index) in selectedProdList" :key="index">
               <el-image class="img" :src="domainName+item.image"></el-image>
               <div class="info">
                 <div class="name">
                   {{item.proname_zn}}({{item.proname}})
                   <span>{{item.catenames}}</span>
                 </div>
                 <div class="price hd">
                   活动价格:RM {{item.rprice/100}}
                 </div>
                 <div class="price yj">
                   原价:RM {{item.mprice/100}}
                 </div>
                 <div class="add-sub">
                   <span class="button" @click="item.sum==0?0:item.sum--;clooseProd(item)"><i class="el-icon-minus"></i></span>
                   <el-input v-model="item.sum" @change="clooseProd(item)" class="num"></el-input>
                   <span class="button" @click="item.sum++;clooseProd(item)"><i class="el-icon-plus"></i></span>
                 </div>
                 <div class="status">
                   <el-radio v-if="item.sum>0" v-model="item.status" :label="2">待付款</el-radio>
                   <el-radio v-if="item.sum>0" v-model="item.status" :label="3">已付款</el-radio>
                 </div>
               </div>
             </div>
             <el-button class="bottom" :disabled="selectedProdList.length==0" @click="saveProd">确认添加({{prodSum(selectedProdList,'sum')}})</el-button>
           </div>
         </el-drawer>
    </el-dialog>
    <!-- 添加商品结束 -->

    <!-- 结账确认开始 -->
    <el-dialog title="结账" :visible.sync="dialogBillVisible" center class="users" width="95%">
      <el-form ref="ruleForm" :model="billInfo" label-width="70px">
        <el-form-item label="交易单号">
          <span>{{billInfo.transno}}</span>
        </el-form-item>
        <el-form-item label="交易类型">
          <span>{{
            billInfo.transtype == 1 ? '预定订单订金付款' :
            billInfo.transtype == 2 ? '预定订单结账付款' :
            billInfo.transtype == 3 ? '商品订单付款' :
            billInfo.transtype == 4 ? '充值' :
            billInfo.transtype == 5 ? '反馈转钱包' :
            billInfo.transtype == 6 ? '反馈' :
            billInfo.transtype == 7 ? '提现' :
            billInfo.transtype == 8 ? '佣金' : '未知类型'
            }}</span>
        </el-form-item>
        <el-form-item label="支付方式">
            <el-radio v-model="billInfo.paytype" :label="1">钱包支付</el-radio>
            <el-radio v-model="billInfo.paytype" :label="2">反馈钱包支付</el-radio>
            <el-radio v-model="billInfo.paytype" :label="3">现金支付</el-radio>
        </el-form-item>
        <el-form-item label="交易金额">
          <span>{{billInfo.number/100}}</span>
        </el-form-item>
        <el-form-item label="优惠金额">
          <el-input type="number" v-model='youhui'></el-input>
        </el-form-item>
        <!-- <el-form-item> -->
        <el-button type="primary" @click="submitBill">确认支付</el-button>
        <!-- </el-form-item> -->
      </el-form>
    </el-dialog>
    <!-- 结账确认结束 -->
  </div>
</template>

<script>
import { getDorList, getDinList, dorAdd, dorEdit, dorChk, dorSet, getDorDet, addDorP, delDorP, doPay, refOrd, dorsel, store } from '@/api/din'
import { getProdList } from '@/api/prod'
import { getUserList } from '@/api/member.js'
import { formatJson, createUniqueString } from '@/utils/index'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { Message } from 'element-ui'
import UploadExcelComponent from '@/components/UploadExcel/index.vue'

import Base64 from 'base-64';
import md5 from 'js-md5';
import sha1 from 'sha1'
import qs from 'qs'

export default {
  name: 'UserList',
  components: { Pagination, UploadExcelComponent },
  filters: {
    statusFilter(status) {
      if (status) {
        status = 'deleted'
      } else {
        status = 'published'
      }
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: [],
      modules: [], // 弹窗下拉框数据
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 15
      },
      dialogShuVisible: false,
      prodShu: 0,
      did: '',
      proid: '',
      memberLevels: [], // 权限类型
      timetype: 0, // 搜索等级
      searchcontent: '', // 搜索内容
      searchdate: '', // 搜索日期
      // 日期插件参数
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      // 弹窗标题
      dialogTitle: '',
      dialogFormVisible: false,
      dialogUploadVisible: false,
      dialogBillVisible: false,

      dialogProdVisible: false,
      prodList: [],
      selectedProdList: [],
      detailsProdList: [],
      scene: '',
      scenename: '',
      prodListQuery: {
        page: 1,
        limit: 4
      },
      searchProd: '',
      prodListLoading: false,
      prodTotal: 0,
      drawer: false,
      selectDid: '',
      selectStatus: '',
      selectOrdersn: '',
      selectInfo: {},
      domainName: process.env.VUE_APP_BASE_DOMAIN,
      //详情状态
      detailsShowStatus: false,
      detailsInfo:{},
      // 表单数据
      formRow: {
        tid: '',
        uid: '',
        timetype: '',
        sitday: '1990-09-18',
        pernum: '',
        prods: '',
        remark: ''
      },
      tableName: '',
      tableSitnum: null,
      userPhone: '',
      timetypeList: [
        {value: 1,label: '2:00PM~4:00PM'},
        {value: 2,label: '4:00PM~6:00PM'},
        {value: 3,label: '6:00PM~8:00PM'},
        {value: 4,label: '8:00PM~10:00PM'},
      ],
      billInfo: {},
      youhui: ''
    }
  },
  computed: {
    sitday: {
      get() {
        return new Date(Date.parse(this.formRow.sitday.replace(/-/g, '/')))
      },
      set(val) {
        this.formRow.sitday = val
      }
    },
    moneyTotal: {
      get() {
        return this.formRow.total / 100
      },
      set(val) {
        this.formRow.total = val * 100
      }
    },
    prodSum() {
      return function(arr,keyName){
        let total = 0;
        if(arr.length>0){
          total = arr.reduce(function (total, currentValue, currentIndex, arr){
            return currentValue[keyName] ? (total + currentValue[keyName]) : total;
          }, 0);
        }
        return total;
      }
    }
  },
  created() {
    this.getList()
    // this.get_levels()
  },
  methods: {
    // 获取列表数据
    getList() {
      this.listLoading = true
      const search = { searchcontent: this.searchcontent, searchtype: this.timetype }
      if (this.searchdate) {
        const startDate = this.searchdate[0]
        const endDate = this.searchdate[1]
        search.startDate = startDate
        search.endDate = endDate
      }
      const postdata = { ...this.listQuery, ...search }
      getDorList(postdata).then((response) => {
        const { data } = response
        console.log(response, 'getUserList')
        this.list = data.list
        this.total = data.total
        this.listLoading = false
      })
    },
    // 用户等级搜索
    userLevelSearch(e) {
      this.timetype = e
      this.getList()
    },
    //查看详情
    showDetails(row) {
      console.log(row)
      this.detailsProdList = []
      this.scenename = ''
      this.scene = ''
      this.selectDid = row.id
      this.selectStatus = row.status
      this.selectOrdersn = row.ordersn
      this.selectInfo.username = row.username
      this.selectInfo.contact = row.contact
      this.selectInfo.time = row.sitday + (row.timetype == 1 ? ' 2:00PM~4:00PM' : row.timetype == 2 ?  ' 4:00PM~6:00PM' : row.timetype == 3 ? ' 6:00PM~8:00PM' : row.timetype == 4 ? ' 8:00PM~10:PM' : ' 未知时间段')
      this.selectInfo.tips = row.remark
      this.detailsShowStatus = true
      // getDorDet({id:row.id}).then(res=>{
      //   console.log(res)
      //   this.detailsProdList = res.data
      // })
      this.getDetailsProdList()
    },
    getDetailsProdList() {
      this.listLoading = true
      getDorDet({id:this.selectDid}).then(res=>{
        this.detailsProdList = res.data.prods
        this.scenename = res.data.scenename
        this.scene = res.data.scene
        this.listLoading = false
      })
    },
    // 添加预定商品
    addProdShow() {
      this.selectedProdList = []
      this.dialogProdVisible = true
      this.getProdList()
    },
    getProdList() {
      this.prodListLoading = true
      const search = { searchcontent: this.searchProd, status: 1 }
      const postdata = { ...this.prodListQuery, ...search }
      getProdList(postdata).then((response) => {
        const { data } = response
        data.list.forEach(item=>{
          item.sum = 0
          item.status = 2
        })
        console.log(data.list, 'getProdList')
        if(this.selectedProdList.length>0){
          this.selectedProdList.forEach(item=>{
            data.list.forEach(item1=>{
              if(item.id == item1.id){
                item1.sum = item.sum
                item1.status = item.status
              }
            })
          })
        }
        this.prodList = data.list
        this.prodTotal = data.total
        this.prodListLoading = false
      })
    },
    clooseProd(e) {
      // console.log(e)
      if(this.selectedProdList.length>0 && e.sum){
        // console.log(JSON.stringify(this.selectedProdList),JSON.stringify(e))
        if(JSON.stringify(this.selectedProdList).indexOf(JSON.stringify(e))===-1){
          // console.log("没有")
        	this.selectedProdList.push(e);
        }else{
        	for (var i=0;i<this.selectedProdList.length;i++) {
        		if(e.id===this.selectedProdList[i].id){
              if(e.sum>0){
                // console.log("sum>0")
                this.selectedProdList[i] = e
              }else{
                // console.log("sum<0",this.selectedProdList[0].sum)
                this.selectedProdList.splice(i,1)
              }
        		}
            // console.log(this.selectedProdList[i].sum,i)
        	}
          this.selectedProdList = this.selectedProdList
          // console.log(this.selectedProdList[0].sum)
        }
      }else if(e.sum){
        this.selectedProdList.push(e)
      }else{
        for (var i=0;i<this.selectedProdList.length;i++) {
        	if(e.id===this.selectedProdList[i].id){
            if(e.sum>0){
              // console.log("sum>0")
              this.selectedProdList[i] = e
            }else{
              // console.log("sum<0",this.selectedProdList[0].sum)
              this.selectedProdList.splice(i,1)
            }
        	}
          // console.log(this.selectedProdList[i].sum,i)
        }
        this.selectedProdList = this.selectedProdList
      }
      console.log(this.selectedProdList)
    },
    saveProd() {
      console.log(this.selectedProdList)
      let data = []
      this.selectedProdList.forEach(item=>{
        data.push({
          proid: item.id,
          pronum: item.sum,
          status: item.status
        })
      })
      data=JSON.stringify(data)
      addDorP({did:this.selectDid,prods:data}).then(res=>{
        console.log(res)
        Message({
          message: '保存成功',
          type: 'success',
          duration: 2 * 1000
        })
        this.selectedProdList = []
        this.dialogProdVisible = false
        this.drawer = false
        this.getDetailsProdList()
      })
    },
    //退订商品
    delDorp(row) {
      // console.log(row)
      this.$confirm('确认退订' + row.proname_zn + '(' + row.proname + ')' + '吗?', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delDorP({ id: row.id }).then(res => {
          this.$message({
            type: 'success',
            message: '退订成功'
          })
          this.getDetailsProdList()
        })
      }).catch((e) => {
        // console.log(e)
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
      // delDorp()
    },
    // 退订订单
    goRef(row) {
      this.$confirm('确认退订吗?', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        refOrd({ id: row.id }).then(res => {
          this.$message({
            type: 'success',
            message: '退订成功'
          })
          this.getDetailsProdList()
        })
      }).catch((e) => {
        // console.log(e)
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 表单提交方法
    submitForm(formName) {
      if (this.formRow.id) {
        if(!this.formRow.remark){
          delete this.formRow.remark
        }
        dorEdit(this.formRow).then(res => { // 编辑订单
          Message({
            message: '保存成功',
            type: 'success',
            duration: 2 * 1000
          })
          this.getList()
          this.dialogFormVisible = false
        })
      } else {
        if(this.formRow.ordtype == 2){
          delete this.formRow.prods
        }
        if(!this.formRow.remark){
          delete this.formRow.remark
        }
        dorAdd(this.formRow).then(res => { // 添加订单
          Message({
            message: '保存成功',
            type: 'success',
            duration: 2 * 1000
          })
          this.getList()
          this.dialogFormVisible = false
        })
      }
    },

    // 添加
    addShow() {
      let date =  new Date();
      let seperator1 =  "-" ;
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month =  "0"  + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate =  "0"  + strDate;
      }
      let currentdate = year + seperator1 + month + seperator1 + strDate;
      this.tableName= '',
      this.userPhone= '',
      this.formRow = {
        tid: '',
        uid: '',
        timetype: '',
        sitday: currentdate,
        pernum: '',
        remark: ''
      }
      this.dialogTitle = '预定订单添加'
      this.dialogFormVisible = true
    },
    querySearchTable(queryString, cb) {
      console.log(queryString);
      let cbData = [];
      getDinList({limit:1000,page:1,searchcontent:queryString}).then(res=>{
        res.data.list.forEach(item=>{
          cbData.push({
            id:item.id,
            value:item.title,
            tableSitnum:item.sitnum
          })
        })
        this.formRow.pernum = ''
      })
      cb(cbData);
    },
    handleSelectTable(item) {
      this.formRow.tid = item.id;
      this.tableSitnum = item.tableSitnum;
    },
    querySearchUser(queryString, cb) {
      console.log(queryString);
      let cbData = [];
      getUserList({limit:1000,page:1,searchcontent:queryString}).then(res=>{
        res.data.list.forEach(item=>{
          cbData.push({
            id:item.id,
            value:item.contact
          })
        })
      })
      cb(cbData);
    },
    handleSelectUser(item) {
      this.formRow.uid = item.id;
    },

    // 编辑
    editShow(row) {
      this.formRow = row
      this.dialogTitle = '订单编辑'
      this.dialogFormVisible = true
      this.tableName= row.title
      this.userPhone= row.contact
    },


    //接单
    goTo2(row) {
      this.$confirm('确认接单吗?', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        dorSet({ id: row.id,status: 2 }).then(res => {
          this.$message({
            type: 'success',
            message: '确认成功'
          })
          this.getList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },

    //存酒
    doStoreShow(item) {
      console.log(item)
      this.did=item.did
      this.proid=item.proid;
      this.dialogShuVisible=true
      // store()
    },
    doStore() {
      store({did:this.did,proid: this.proid,number:this.prodShu}).then(res=>{
        this.$message({
          type: 'success',
          message: '成功'
        })
        this.dialogShuVisible=false
        this.getList()
      })
    },
    //结账
    goTo3(row) {
      this.$confirm('确认客户就餐完毕吗?', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        dorSet({ id: row.id,status: 3 }).then(res => {
          this.$message({
            type: 'success',
            message: '确认成功'
          })
          this.getList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    doRchk(row,dotype) {
      console.log(row)
      dorChk({id: row.id}).then(res => {
        // console.log(res)
        this.billInfo = {
          did: res.data.orderid,
          transtype: res.data.transtype,
          paytype: res.data.paytype,
          dotype: dotype,
          decre: res.data.decre,
          transno: res.data.transno,
          number: res.data.number
        };
        this.dialogBillVisible = true;
      })
    },
    submitBill(){
      let signKey = 'fc473d19db504eade61ec035578a7acca37481c2'
			let str = ''
      str = {
        transno: this.billInfo.transno,
        expired: +(Math.round(new Date().getTime()/1000).toString())+60,
        number: this.billInfo.number,
        paytype: this.billInfo.paytype,
        youhui: this.youhui * 100
      }
      let urlStr = qs.stringify(str)
      console.log(str,urlStr)
			let seStr = urlStr+'&signkey='+signKey
			let str1 = urlStr + '&secretdata=' + md5(sha1(seStr))
			str1 = Base64.encode(str1)
      dorsel({sign:str1}).then(res=>{
        console.log(res)
        this.$message({
          type: 'success',
          message: '结账成功'
        })
        this.getList()
        this.dialogBillVisible = false;
      })
    },

    // 禁用or启用
    forbiden(row, status) {
      const word = status ? '启用' : '禁用'
      this.$confirm('确认' + word + row.username + '吗?', word + '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        userStatus({ id: row.id, walletid: row.walletid, status: status }).then(res => {
          this.$message({
            type: 'success',
            message: status ? '启用成功' : '禁用成功'
          })
          this.getList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: status ? '已取消启用' : '已取消禁用'
        })
      })
    },
    // 改变用户状态
    changeStatus(id, status) {
      // statusAdmin({ id, status }).then(() => {
      //   const type = status ? 'success' : 'success'
      //   const message = status ? '启动成功' : '禁用成功'
      //   this.$message({ type, message })
      //   this.getList()
      // })
    },

    // 导出
    // exportData() {
    //   this.downloadLoading = true
    //   import('@/vendor/Export2Excel').then(excel => {
    //     const tHeader = ['用户ID', '用户邮箱', '英文名称', '中文名称', '联系方式', '累计消费', '状态', '出生日期', '注册时间']
    //     const filterVal = ['spreadid', 'email', 'username', 'username_zn', 'contact', 'total', 'deleted_at', 'birthday', 'created_at']
    //     const list = this.list
    //     const data = formatJson(filterVal, list)
    //     const filename = createUniqueString()
    //     console.log(data, 'exportData')
    //     excel.export_json_to_excel({
    //       header: tHeader,
    //       data,
    //       filename,
    //       autoWidth: true,
    //       bookType: 'xlsx'
    //     })
    //     this.downloadLoading = false
    //   })
    // }
  }
}
</script>

<style lang="scss" scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.prod-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  .prod-list-item{
    // flex-wrap: wrap;
    width: 356px;
    min-height: 150px;
    padding: 10px;
    display: flex;
    align-items: center;
    margin-top: 20px;
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    box-shadow: 0px 2px 5px 0px rgba(207, 205, 205, 0.2);
    border-radius: 10px;
    .img{
      width: 100px;
      min-width: 100px;
      margin-right: 13px;
    }
    .info{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      ::v-deep .el-input-number--medium{
        width: 148px;
        height: 30px;
        border-radius: 15px;
        border: 1px solid #DCDCDC;
        overflow: hidden;
        display: flex;
        align-items: center;
        .el-input-number__decrease,.el-input-number__increase,.el-input--medium,.el-input__inner{
          height: 30px;
          border: none;
          line-height: 30px;
          border-radius: 15px;
        }
        .el-input-number__decrease,.el-input-number__increase{
          margin-top: -1px;
          background-color: #F5F7FA;
          border-radius: 0;
          color: #333;
          width: 40px;
        }
        .el-input-number__decrease{
          border-right: 1px solid #DCDCDC;
        }
        .el-input-number__increase{
          border-left: 1px solid #DCDCDC;
        }
        .el-input-number__decrease:hover,.el-input-number__increase:hover{
          color: #E82F5F;
        }
      }
      .status{
        margin-top: 12px;
        ::v-deep .el-radio{
          &:hover{
            color: #E82F5F;
            .el-radio__inner{
              border-color: #E82F5F;
            }
          }
          .is-checked{
            .el-radio__inner{
              background-color: #fff;
              border-color: #E82F5F;
              border-width: 2px;
              &::after{
                background-color: #E82F5F;
              }
            }
          }
        }
        ::v-deep .el-radio.is-checked{
          .el-radio__label{
            color: #E82F5F;
          }
        }
      }
      .name{
        font-size: 17px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
      }
      .price.hd{
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #E82F5F;
        margin: 10px 0 5px;
      }
      .price.yj{
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        text-decoration: line-through;
        color: #999999;
      }
    }
  }
}

.bottom{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 34px;
  .left,.right{
    margin: 0;
    width: 298px;
    height: 42px;
    border: 2px solid #E82F5F;
  }
  .left{
    background: none;
    border-radius: 21px 0px 0px 21px;
    font-size: 17px;
    font-weight: 400;
    color: #E82F5F;
  }
  .left:hover{
    background: rgba(232, 47, 95, 0.2);
  }
  .right:hover{
    background: rgba(232, 47, 95, 0.7);
  }
  .right{
    background: #E82F5F;
    border-radius: 0px 21px 21px 0px;
    font-size: 17px;
    font-weight: 400;
    color: white;
  }
}

.order-info{
  font-size: 15px;
  font-weight: 400;
  color: #999999;
  margin-bottom: 10px;
}
.search{
  margin-top: -20px;
  .el-input{
    .el-input__inner{
      border: 1px solid #E5E5E5;
    }
    .el-input-group__append{
      .el-button{
        border-radius: 0 5px 5px 0;
        &:hover{
          color: white;
        }
      }
    }
  }
}

.drawer{
  ::v-deep .el-drawer__header{
    span{
      font-size: 19px;
      font-weight: 400;
      color: #333333;
    }

  }
}
::v-deep .el-drawer{
  font-size: 19px;
  font-weight: 400;
  color: #333333;
  max-width: 490px;
  overflow-y: auto;
  .el-drawer__header{
    margin-bottom: 0;
    span{
      font-size: 19px;
      font-weight: 400;
      color: #333333;
    }
  }
  .el-drawer__body{
    .prod-list{
      display: grid;
      grid-template-columns: repeat(1,100%);
      justify-items: center;
      align-items: center;
      .prod-list-item{
        width: 90%;
        flex-wrap: wrap;
        // justify-content: center;
        padding: 20px;
        .add-sub{
          width: 148px;
          height: 30px;
          background: #F5F7FA;
          border: 1px solid #DCDCDC;
          border-radius: 15px;
          display: grid;
          grid-template-columns: repeat(3,33.3%);
          justify-content: space-between;
          align-items: center;
          text-align: center;
          line-height: 30px;
          overflow: hidden;
          .el-input{
            .el-input__inner{
              text-align: center;
              height: 29px;
              border: none;
              border-left: 1px solid #DCDCDC;
              border-right: 1px solid #DCDCDC;
              border-radius: 0;
            }
          }
        }
      }
    }
    .bottom{
      width: 90%;
      height: 42px;
      background: #E82F5F;
      border-radius: 21px;
      font-size: 17px;
      font-weight: 400;
      color: #FFFFFF;
      border: none;
    }
  }
}
</style>
